// $minWidth:200px;
// $minHeight:300px;
// $mainColor:pink;
// div{
// 	width:$minWidth ;
// 	height:$minHeight ;
// 	background-color:$mainColor ;
// 	$content:'我是一个学生';
// 	.title::before{
// 		content: $content;
// 	}
// }
// p::before{
// 	content: $content;
// }

// $width:200px;
// .box1{
// 	width: $width;
// 	height: $width;
// 	background-color: aqua;
// 	.inner_box{
// 		$myWidth:$width - 50px;
// 		width:$myWidth;
// 		height: $myWidth;
// 		background-color: deeppink;
// 		transition: all 0.5s;
// 		&:hover{
// 			background-color: yellow;
// 			transition: all 0.5s;
// 		}
// 	}
// 	&-title{
// 		color:lawngreen;
// 		font-size: 18px;
// 	}
// }


// $count:10;
// $context:'我是谁';
// $color1:pink;
// $color2:blue;
// .box1{
// 	height: 100px;
// 	width: 200px;
// 	@if $count != 10{
// 		background-color: $color1;
// 	}@else{
// 		background-color: $color2;
// 	}
// }



// $count:10;
// $context:'我是谁';
// $color1:pink;
// $color2:blue;
// .box1{
// 	height: 100px;
// 	width: 200px;
// 	@if not false{
// 		background-color: $color1;
// 	}@else{
// 		background-color: $color2;
// 	}
// }

// $width:200px;
// div{
// 	width: 50 - 50;
// 	height: ($width/2);
// 	height: (500px/2);
// }


// .container {
// 	content: "Foo" +Bar;
// 	font-family: sans -+"serif";
// }




// $size:size;
// $titleName:title;
// $width:100px;
// $author:'鸭鸭';


// .box1_#{$titleName}{
// 	width: $width;
// 	height: $width;
// 	font-#{$size}:108px;
// }

// @for $i from 4 to 10{
// 	.div#{$i}{
// 		width:100px;
// 	}
// }

// @for $i from 4 through 10{
// 	.div#{$i}{
// 		width:100px;
// 	}
// }

// $list:2 3 4 5;
// @each $var in $list{
// 	$index:index($list,$var);
// 	.p#{$index - 1}{
// 		width: 100px * $var;
// 	}
// }




// $count:0;
// @while $count < 10 {
// 	.p#{$count}{
// 		width: 100px;
// 	}
// 	$count:$count + 1;
// }





/**
 * @import "./common.scss"
 */




//三角形练习
// @mixin message1 ($fontSize,$color,$textAlign,$lineHeight,$padding){
// 	font-size: $fontSize;
// 	color:$color;
// 	text-align: $textAlign;
// 	line-height:$lineHeight;
// 	padding: $padding;
// }
// .message2{
// 	@include message1(29px,pink,center,20px,20px);
// }
// .message3{
// 	@include message1(39px,red,center,10px,90px);
// }
// $triangle-size:50px;
// $border-color:pink;
// .triangle-div{
// 	width: 0;
// 	height:0;
//     border-left:$triangle-size solid transparent;
// 	border-right:$triangle-size solid transparent;
// 	border-bottom:$triangle-size solid $border-color;
// }

// @mixin triangle-size ($width,$height,$triangleSize.$divColor,$borderLeft,$borderRight,$borderBottom,$borderTop){
//  	width:$width;
// 	height: $height;
// 	triangle-size:$triangleSize;
// 	color:$divColor;
// 	border-left: ;
// }
// .triangle-size1{
// 	@include triangle-size(0,0,$triangle-size solid transparent,$triangle-size solid transparent,pink);
// }
// .triangle-size2{
// 	@include triangle-size(39px,red,center,10px,90px);
// }

$triangle-size:50px;
$border-color:pink;
.triangle-div{
	width: 0;
	height:0;
    border-left:$triangle-size solid transparent;
	border-right:$triangle-size solid transparent;
	border-top:$triangle-size solid $border-color;
}

$triangle-size:60px;
$border-color:yellow;
.triangle-div1{
	width: 0;
	height:0;
    border-left:$triangle-size solid transparent;
	border-right:$triangle-size solid transparent;
	border-bottom:$triangle-size solid $border-color;
}

$triangle-size:80px;
$border-color:black;
.triangle-div2{
	width: 0;
	height:0;
    border-left:$triangle-size solid $border-color;
	border-top:$triangle-size solid transparent;
	border-bottom:$triangle-size solid transparent;
}

$triangle-size:100px;
$border-color:red;
.triangle-div3{
	width: 0;
	height:0;
    border-top:$triangle-size solid $border-color;
	border-right:$triangle-size solid transparent;
	border-bottom:$triangle-size solid transparent;
}








//定义背景
// .banner{
// 	background-color: rgba(0, 0, 0, 0.9);
// 	height: 100vh;
// 	width: 100%;
// }

// @function getShadows($n){
// 	$Shadows:'#{random(100)}vw #{random(100)}vh #fff';
	
// 	@for $i from 2 to $n{
		
// 	$Shadows:'#{$Shadows}}, #{random(100)}vh #{random(100)}vh  #fff';
		
// 	}
// 	@return unquote($Shadows)
// }
// $duration :500s;
// $count:500;
// @for $i from 1 to 5 {
// 	$duration:floor($duration/2);
// 	$count:floor($count/2);	
	
// 	.layer#{$i} {
// 		$size:#{$i}px;
// 		position: fixed;
// 		width: $size;
// 		height: $size;
// 		background-color:rgba(0, 0, 0, 0.032);
// 		border-radius: 50%;
// 		top: 0;
// 		left: 0;
// 		box-shadow: getShadows($count);
// 		animation: moveUp $duration linear infinite;
		
// 		&::after{
// 			content: '';
// 			position: fixed;
// 			left:0
// 			top:-100vh;
// 			border-radius: inherit;
// 			box-shadow: inherit;
// 			width: $size;
// 			height: $size;
// 		}
// 	}
// }

// @keyframes moveUp{
// 	100%{
// 		transform: translateY(100vh);
// 	}
// }